<template>
  <el-card class="rights">
    <el-table
      :data="tableData"
      style="width: 100%;margin: 20px 15px"
      border
    >
      <el-table-column
        type="index"
        label="#"
        width="40"
        align="center"
      />
      <el-table-column
        prop="authName"
        label="权限名称"
      />
      <el-table-column
        prop="path"
        label="路径"
      />
      <el-table-column
        label="权限等级"
      >
        <template slot-scope="{row}">
          <el-tag v-if="row.level==='0'">一级</el-tag>
          <el-tag v-if="row.level==='1'" type="success">二级</el-tag>
          <el-tag v-if="row.level==='2'" type="warning">三级</el-tag>
          <el-tag v-if="row.level==='3'" type="danger">四级</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { authorityList } from '@/api/authority'
export default {
  data() {
    return {
      tableData: []
    }
  },

  created() {
    this.loadList()
  },

  methods: {
    async loadList() {
      this.tableData = await authorityList('list')
    }
  }
}
</script>

<style scoped lang='scss'>
//.rights{
//  padding: 20px 10px;
//}
</style>
